<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动规则(float rules)</title>
    <!-- 
    一. CSS中的浮动规则（floating rules）用于控制元素在页面上的浮动效果。
    浮动规则相关的常见特点和用法： 
 
      1. float属性：通过设置元素的float属性为left或right，可以使元素向左或向右浮动。 
      2. 浮动元素会脱离正常文档流，但仍会影响其他元素的布局。 
      3. 其他元素会围绕浮动元素进行排列，类似于文字环绕图片的效果。 
      4. 可以使用clear属性来清除浮动，避免浮动元素导致父元素高度塌陷的问题。 
      5. 浮动元素通常用于创建多栏布局或实现元素的对齐效果。 

    二. CSS中的浮动规则（floating rules）和定位元素脱离标准流的区别如下： 
 
      1. 浮动规则（Floating Rules）： 
      - 浮动元素会"脱离正常文档流"，但仍会影响其他元素的布局。 
      - 浮动元素会向左或向右浮动，其他元素会围绕浮动元素进行排列。 
      - 通常用于创建多栏布局或实现元素的对齐效果。 
      
      2. 定位元素脱离标准流（Positioned Elements）： 
      - 使用绝对定位（absolute positioning）或固定定位（fixed positioning）的元素会"脱离标准流"。 
      - 脱离标准流的元素不再占据文档中的原始位置，可以通过top、right、bottom、left属性来相对于其最近的已定位祖先元素进行定位。 
      - 可以通过设置position属性为absolute或fixed来实现元素的脱离标准流。 
      
    总结：浮动元素和定位元素脱离标准流的主要区别在于浮动元素仍会影响其他元素的布局，而定位元素脱离标准流后不再占据原始位置，可以自由定位。 

    三. 正常文档流和脱离标准流的主要区别如下： 
 
      1. 正常文档流： 
      - 正常文档流是指元素按照其在HTML文档中的顺序进行布局的方式。 
      - 元素在正常文档流中根据其display属性值（如block、inline、inline-block）进行排列，从上到下、从左到右。 
      - 元素在正常文档流中会相互影响，一个元素的位置改变会影响其他元素的布局。 
      
      2. 脱离标准流： 
      - 脱离标准流是指元素脱离了正常文档流，不再按照文档流的顺序进行布局。 
      - 使用绝对定位或固定定位的元素会脱离标准流，可以通过top、right、bottom、left属性自由定位。 
      - 脱离标准流的元素不再占据文档中的原始位置，不会影响其他元素的布局。 
      
      总结：正常文档流是元素按照文档流顺序进行布局，而脱离标准流的元素可以自由定位而不受其他元素影响。 
   -->
    <!-- 规则1 -->
    <style>
      .float-container-v1 {
        width: 280px;
        height: 100px;
        border: 1px solid #000;
        background-color: skyblue;
        border-radius: 8px;
        padding: 10px;
      }

      /* float - 脱离标准流 */
      .float-container-v1 .float01 {
        float: left;
        font-size: 26px;
        color: saddlebrown;
      }

      .float-container-v1 .float02 {
        float: right;
        font-size: 26px;
        color: saddlebrown;
      }
    </style>
    <!-- 规则2 - 浮动元素之间不能层叠 -->
    <style>
      .float-container-v2 {
        width: 580px;
        height: 100px;
        border: 1px solid #000;
        background-color: skyblue;
      }

      .float-container-v2 .item {
        width: 100px;
        height: 50px;
        border: 1px solid #000;

        /* float: left; */
      }

      .float-container-v2 .float01 {
        float: left;
        margin-left: 20px;
      }

      .float-container-v2 .float02 {
        float: left;
      }

      .float-container-v2 .float03 {
        float: left;
      }

      .float-container-v2 .float04 {
        float: left;
      }
    </style>
    <!-- 规则3 -->
    <style>
      .float-container-v3 {
        width: 1080px;
        height: 100px;
        border: 1px solid #000;
        background-color: skyblue;
      }

      .float-container-v3 strong {
        float: left;
      }

      .float-container-v3 div {
        float: left;
      }
    </style>
  </head>
  <body>
    <!-- 规则1 - 脱离标准流 -->
    <h3>规则1 - 脱离标准流</h3>
    <div class="float-container-v1">
      <div class="float01">float01</div>
      <div class="float02">float02</div>
    </div>

    <!-- 规则2 - 浮动元素之间不能层叠-->
    <h3>规则2 - 浮动元素之间不能层叠</h3>
    <div class="float-container-v2">
      <div class="item float01">float01</div>
      <div class="item float02">float02</div>
      <div class="item float03">float03</div>
      <div class="item float04">float04</div>
    </div>

    <!-- 规则3 - display 属性会变为 inline-block -->
    <h3>规则3 - display 属性会变为 inline-block</h3>
    <div class="float-container-v3">
      <span>my name span element</span>
      <i>my name i element</i>
      <div>my name div element</div>
      <strong>my name strong element</strong>
    </div>
  </body>
</html>
